<template>
  <MainContainer class="p-5">
    <MyQuery
      v-model:params="params"
      :options="queryOptions"
      @query="handleQuery"
      @reset="handleReset"
    ></MyQuery>
    <MyTable v-loading="loading" class="my-2" :data="list" :columns="columns"></MyTable>
    <el-pagination
      v-model:currentPage="params.page"
      v-model:page-size="params.limit"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="justify-end"
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
    <!-- 分配角色 -->
    <MyFormDialog
      v-model:visible="dialogVisible"
      v-model:formData="formData"
      title="绑定摄像头"
      :options="formOptions"
      :loading="loading"
      @confirm="handleConfirm"
    ></MyFormDialog>
  </MainContainer>
</template>
<script setup lang="jsx">
import useCRUD from '@/composables/useCRUD.ts'
import MyQuery from '@/components/MyQuery.vue'
import MainContainer from '@/components/MainContainer.vue'
import MyFormDialog from '@/components/MyFormDialog.vue'
import MyTable from '@/components/MyTable.vue'
import { fetchList } from '@/api/robot-archives.js'
import { fetchList as fetchCameraList, setCameraRid, getByCode } from '@/api/robot-camera.js'
import { ref } from 'vue'

const queryOptions = [
  {
    prop: 'name',
    placeholder: '机器人名称'
  },
  {
    prop: 'code',
    placeholder: '机器人识别码'
  },
  {
    prop: 'rType',
    placeholder: '机器人类型',
    customRender() {
      const options = [
        {
          label: '室内',
          value: 'insideInspection'
        },
        {
          label: '室外',
          value: 'outsideInspection'
        }
      ]
      return (
        <el-select>
          {options.map((item) => {
            return <el-option label={item.label} value={item.value}></el-option>
          })}
        </el-select>
      )
    }
  }
]

const columns = [
  {
    label: '编号',
    prop: 'id'
  },
  {
    label: '机器人名称',
    prop: 'name'
  },
  {
    label: '编码',
    prop: 'code'
  },
  {
    label: '状态',
    prop: 'status'
  },
  {
    label: '操作',
    prop: 'action',
    customRender(row) {
      return (
        <div>
          <el-button class="!text-[#707bdf]" link onClick={() => openDialog(row)}>
            绑定摄像头
          </el-button>
        </div>
      )
    }
  }
]

const crudOptions = {
  queryApi: fetchList,
  newParams: { RType: 'inspection' }
}
const { params, handleQuery, list, loading, handleReset, total } = useCRUD(crudOptions)

handleQuery()

// 绑定摄像头相关 --------------------------------------------------------
const dialogVisible = ref(false)
const formData = ref({})
const cameraList = ref([])
const formOptions = [
  {
    prop: 'cameraId',
    label: '摄像头',
    customRender() {
      return (
        <el-select placeholder="请选择" class="w-full">
          {cameraList.value.map((item) => {
            return <el-option label={item.name} value={item.id}></el-option>
          })}
        </el-select>
      )
    }
  }
]

const curRobot = ref({})
async function openDialog(row) {
  dialogVisible.value = true
  curRobot.value = row
  const { data } = await getByCode(row.code, row.type)
  if (data.length > 0) {
    formData.value.cameraId = data[0].id
  }
}

async function getCameraList() {
  const { data } = await fetchCameraList({ page: 1, limit: 999 })
  cameraList.value = data.list || []
}

getCameraList()

async function handleConfirm(data) {
  loading.value = true
  await setCameraRid({
    id: data.cameraId,
    rid: curRobot.value.code,
    rtype: curRobot.value.type
  })
  loading.value = false
  dialogVisible.value = false
}
</script>
